<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTextStyle: 'black',
    navigationBarTitleText: '下周点菜',
  },
}
</route>

<template>
  <view class="orderingSearch">
    <cu-navbar textCol="#000000" class="con" title="下周点菜" bgColor="#f3f3f4"></cu-navbar>

    <view class="topSearch" :style="{ '--height': navHeight + 'px' }">
      <uv-search
        placeholder="搜索你想吃的菜品"
        v-model="searchForm.dishName"
        :showAction="false"
        :focus="true"
        bgColor="#ffffff"
        placeholderColor="#ffffff"
        height="61rpx"
        @search="onSearch"
      >
        <template #suffix><view class="searchRight" @click="onSearch">搜索</view></template>
      </uv-search>
    </view>
    <view class="contentBox flex" :style="{ '--height': navHeight - bottom + 'px' }">
      <selectDish
        v-if="selectDishShow"
        style="width: 100%"
        :dataList="dishsList"
        :animation="false"
        :status="selectDishStatus"
        @scrolltolower="scrolltolower()"
        :inDom="inDom"
        @addcart="addcart"
        @onfollow="onfollow"
      ></selectDish>
      <view class="popularSearch" v-else>
        <view class="title">热门搜索</view>
        <view class="connect">
          <view
            class="tag"
            v-for="item in historyList"
            :key="item.id"
            @click="tagSearch(item.connt)"
          >
            {{ item.connt }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store'
import { getSelectDish, getSelectHistory } from '@/service/business/orderingDishes/index'
import { SelectDishInfo } from '@/service/business/orderingDishes/type'
import selectDish from '../orderingDishes/components/selectDish/selectDish.vue'
const userStore = useUserStore()
const bottom = ref(userStore.pinia_SafeVal.bottom)
// 获取高度
const navHeight = ref(0)
// 界面分页
const selectDishPages = {
  pageSize: 10,
  page: 1,
}
// 进来时不展示selectDish
const selectDishShow = ref(false)
const getHeight = () => {
  const instance = getCurrentInstance()

  const query = uni.createSelectorQuery().in(instance)
  query
    .select('.con')
    .boundingClientRect((data) => {
      navHeight.value = data.height
    })
    .exec()
}
const searchForm = reactive({
  dishName: '',
})
// 菜肴列表
const dishsList = ref([])
// 历史搜索列表
const historyList = ref([])
// 上滑状态
const selectDishStatus = ref('loading')
// 热门搜索
const tagSearch = (name: string) => {
  searchForm.dishName = name
  getselectDishApi()
  selectDishShow.value = true
}
const onSearch = () => {
  selectDishShow.value = true
  getselectDishApi()
}
const addcart = (param: { index: number; item: SelectDishInfo }) => {
  console.log(param)
  dishsList.value[param.index].flg = -1
}
// 关注菜品
const onfollow = (index) => {
  console.log(dishsList.value, index)
  dishsList.value[index].attent = dishsList.value[index].attent ? 0 : 1
}
const scrolltolower = () => {
  selectDishPages.page++
  getselectDishApi(1)
}
// 获取历史搜索
const getSelectHistoryApi = () => {
  return new Promise((reslove) => {
    getSelectHistory({
      userId: userStore.userInfo.user.userId,
    }).then((res) => {
      if (res.retCode === 2000) {
        historyList.value = res.data
      }
    })
  })
}

// 根据菜肴名称模糊搜索 type 0为初始搜索第一页，1为上滑搜索
const getselectDishApi = (type = 0) => {
  // 筛出不为null的属性
  const params = Object.fromEntries(Object.entries(searchForm).filter(([_, v]) => v != null))
  return new Promise((resolve) => {
    getSelectDish({
      size: selectDishPages.pageSize,
      current: selectDishPages.page,
      userId: userStore.userInfo.user.userId,
      ...params,
    }).then((res) => {
      if (res.retCode === 2000) {
        if (type === 0) {
          dishsList.value = res.data
        } else {
          dishsList.value.push(...res.data)
        }
        if (dishsList.value.length === res.total) {
          selectDishStatus.value = 'nomore'
        } else {
          selectDishStatus.value = 'loading'
        }
        resolve(true)
      }
    })
  })
}
onBeforeMount(() => {
  getHeight()
  getSelectHistoryApi()
})
</script>

<style lang="scss" scoped>
.title {
  font-weight: 600;
  font-size: 27rpx;
  color: #111111;
}
.topSearch {
  height: 65.38rpx;
  padding: 0 30.77rpx;
  .searchRight {
    font-weight: 400;
    font-size: 27rpx;
    color: #00754a;
    height: 31rpx;
    line-height: 31rpx;
    width: 70rpx;
    text-align: end;
    border-left: 1px solid #d4e9e2;
  }
}
.contentBox {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - var(--height) - 111.76rpx);
  border-radius: 31rpx 31rpx 0rpx 0rpx;
  padding: 30.77rpx 0 30.77rpx 30.77rpx;
  margin-top: 15.38rpx;
  font-size: 23rpx;
  background-color: #fff;
  .popularSearch {
    width: 100%;
    padding-right: 30.77rpx;
  }
  .connect {
    margin-top: 30.77rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    .tag {
      font-weight: 400;
      font-size: 27rpx;
      color: #595a5b;
      padding: 7.69rpx 30.77rpx;
      background: #f3f3f4;
      border-radius: 58rpx 58rpx 58rpx 58rpx;
      margin:0 20.08rpx 30.87rpx 0;
    }
    .tag:active {
      color: #00754a;
      background: #ffffff;
      border-radius: 58rpx 58rpx 58rpx 58rpx;
      border: 2rpx solid #00754a;
    }
    .tag:last-child {
      margin-right: auto;
    }
  }
}
</style>
